async function home() {
    const res = await axios({
        url: '/page/detail',
        params: {
            pageId: '0'
        }
    })
    console.log(res)
    // 调用轮播图函数
    rotation(res.data.data.pageData.items[1].data)
    // 调用搜索框函数
    search(res.data.data.pageData.items[0])
    // 调用广告模块函数
    advertisement(res.data.data.pageData.items[2])
    // 调用导航模块函数
    navigation(res.data.data.pageData.items[3])
    // 调用商品模块函数
    product(res.data.data.pageData.items[6])
}
home()

// 轮播图模块
function rotation(arr) {
    // console.log(arr)
    document.querySelector('.swiper-wrapper').innerHTML = arr.map(ele => {
        return `
        <div class="swiper-slide">
            <a href="javascript:;">
              <img src="${ele.imgUrl}" alt="" />
            </a>
        </div>
        `
    }).join('')

    // 轮播图自动轮播
    let swiper = new Swiper('.swiper-container', {
        loop: true,
        touchRatio: 0.5,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        paginationElement: "li",
        autoplay: 1000,
        speed: 1000,
        effect: "slide",
        autoplayDisableOnInteraction: false,

    })
}

// 搜索框模块
function search(arr) {
    // console.log(arr.params.placeholder)
    const search = document.querySelector('.search')
    search.style.textAlign = 'left'
    search.style.paddingLeft = '10px'
    search.style.borderRadius = '50PX'
    // search.innerHTML = arr.params.placeholder
    document.querySelector('.search span:nth-child(2)').innerText = arr.params.placeholder

    // 注册search点击事件
    search.addEventListener('click', function () {
        location.href = './search.html'
    })

}

// 广告模块
function advertisement(arr) {
    // console.log(arr)
    document.querySelector('.txt').innerHTML = arr.params.text
    document.querySelector('.notice').style.background = '#525252'
    document.querySelector('.notice').style.color = '#fff'
}

// 导航模块
function navigation(arr) {
    // console.log(arr.data)
    document.querySelector('.list').innerHTML = arr.data.map(ele => {
        // console.log(ele)
        const { imgName, imgUrl, text, id } = ele
        return `
        <a href="./classify.html" class="active">
          <img src="${imgUrl}" alt="" />
          <p>${text}</p>
        </a> 
        `
    }).join('')
}

// 商品模块
function product(arr) {
    console.log(arr.data)
    document.querySelector('.items').innerHTML = arr.data.map(ele => {
        const { goods_image, goods_name, goods_price_max, line_price_max, goods_sales } = ele
        return `
        <a href="javascript:;">
          <div class="left">
            <img src="${goods_image}" alt="" />
          </div>
          <div class="right">
            <h3 class="ellipsis-2">${goods_name}</h3>
            <p>已售${goods_sales}件</p>
            <span class="price">¥${goods_price_max}<i class="old">¥${line_price_max}</i></span>
          </div>
        </a>
        `
    }).join('')

}